<!DOCTYPE html>
<html>
<head>
    <title>完善维修记录</title>
    #parse("sys/header.html")
    <style>
        .from_tab_wide {
            width: 100% !important;
            padding-top: 1% !important;
        }

        [v-cloak] {
            display: none;
        !important;
        }
        .repairMeasure{
            font-weight: bold;
            color: #0b122e;
            display:flex;
            align-items: center;
        }
        .rightOutMargin{
            padding-left: 10px;
            padding-right: 10px;
        }
        .promptInfomation{
            margin-top: 15px;
            margin-bottom: 15px;
            border-radius: 10px;
            padding: 3px;
        }
        .repairMeasureStyle{
            position: absolute;
            right: -22px;
            top: -5px;
            width: 0;
            height: 0;
            border-bottom: 35px solid rgba(234, 0, 0, 0.5);
            border-right: 35px solid transparent;
            border-left: 35px solid transparent;
            transform: rotate(45deg);
        }
        .measureClose{
            position: relative;
            transform: rotate(-45deg);
            color: white;
            left: -5px;
            top: 11px;
            font-size: 18px;
        }
    </style>
</head>
<body>
<div id="rrapp" v-cloak style="background-color: #eae7e7">
    <i-form ref="formValidate" :model="devMaintenRepair" :label-width="90" :rules="ruleValidate">
        <Row>
            <i-col span="9">
                <Card>
                    <p slot="title">
                        基础信息
                    </p>
                      <row>
                          <i-col span="24">
                              <Form-item label-width="88" label="设备编号" prop="devCode">
                                  <i-input v-model="devCodeAndName" placeholder="设备编号" disabled></i-input>
                              </Form-item>
                          </i-col>
                      </row>
                      <row>
                          <i-col span="24">
                              <row>
                                  <i-col :xs="8" :sm="8" :md="8" :lg="8">
                                      <Form-item label-width="88" label="报警分类" prop="vrtId">
                                          <i-input disabled="true" v-model="devMaintenRepair.vrtName" placeholder="设备选择后系统自动拉取" disabled></i-input>
                                      </Form-item>
                                  </i-col>
                                  <i-col :xs="8" :sm="8" :md="8" :lg="8" v-show="flag != '-1'">
                                      <Form-item :label-width="28" label="-">
                                          <i-select placeholder="请选择VFG" v-model="devMaintenRepair.vfgId" @on-change="handleVfgChange">
                                              <i-option v-for="vfg in vfgList" :value="vfg.id" :key="vfg.id">
                                                  {{vfg.name}}
                                              </i-option>
                                          </i-select>
                                      </Form-item>
                                  </i-col>
                                  <i-col :xs="8" :sm="8" :md="8" :lg="8" v-show="flag != '-1'">
                                      <Form-item :label-width="28" label="-">
                                          <i-select placeholder="请选择CCC" v-model="devMaintenRepair.faultCategoryId" @on-change="handleCccChange">
                                              <i-option v-for="ccc in cccList" :value="ccc.id" :key="ccc.id">
                                                  {{ccc.name}}
                                              </i-option>
                                          </i-select>
                                      </Form-item>
                                  </i-col>
                              </row>
                          </i-col>
                      </row>
                      <row class="promptInfomation" v-if="handText">
                          <i-col span="24" >
                              <Form-item label-width="88" label="现场反馈" >
                                  <i-input type="textarea" v-model="desc" placeholder="现场反馈值" disabled></i-input>
                              </Form-item>
                          </i-col>
                      </row>
                    <row class="promptInfomation" v-if="shotPhotoText">
                        <i-col span="24"  >
                            <Form-item label-width="88" label="现场反馈：">
                                <Row>
                                    <i-col span="2" v-for="liveImage in devMaintenRepair.faultImages" style="margin-right: 2px" v-if="devMaintenRepair.faultImages.length>0">
                                        <image :src="liveImage" style="width: 50px;height: 50px" @click="preview(liveImage)"/>
                                    </i-col>
                                    <i-col v-else span="2">
                                        暂无图片列表
                                    </i-col>
                                </Row>
                            </Form-item>
                        </i-col>
                    </row>
                      <row>
                          <template  v-if="flag == 0">
                              <i-col span="24">
                                  <row>
                                      <Form-item label-width="88" label="报警代码" prop="faultCode">
                                          <div style="display: flex;">
                                              <i-select v-model="devMaintenRepair.faultId">
                                                  <i-option v-for="alarm in alarmList" :value="alarm.id" :key="alarm.id">{{alarm.alarmCode + ' ' + alarm.alarmDesc}}</i-option>
                                              </i-select>
                                              <div style="margin-left: 2px">
                                                  <i-button type="info" @click="showLoc(0)" icon="md-arrow-round-forward">手动录入 </i-button>
                                              </div>
                                          </div>
                                      </Form-item>
                                  </row>
                              </i-col>
                          </template>
                      </row>
                      <row>
                          <template  v-if="flag == 1">
                              <i-col span="24">
                                  <Form-item label-width="88" label="报警代码" prop="faultCode">
                                      <div style="display:flex">
                                          <i-input placeholder="请录入类似7001的报警代码，无则填写9999" v-model="devMaintenRepair.faultCode" style="width: 85%"></i-input>
                                          <div style="margin-left: 2px">
                                              <i-button type="info" @click="showLoc(1)" icon="md-arrow-round-forward">&nbsp;选择</i-button>
                                          </div>
                                      </div>
                                  </Form-item>
                              </i-col>
                              <i-col span="24">
                                  <Form-item label-width="88" label="报警描述" prop="faultDesc">
                                      <i-input v-model="devMaintenRepair.faultDesc" placeholder="报警描述"></i-input>
                                  </Form-item>
                              </i-col>
                          </template>
                      </row>
                    <row>
                        <template  v-if="flag == -1">
                            <i-col span="24">
                                <row>
                                    <Form-item label-width="88" label="报警代码" prop="faultCode">
                                        <div style="display: flex;">
                                            <i-select
                                                    v-model="devMaintenRepair.faultId"
                                                    :filterable="true"
                                                    :remote="true"
                                                    :remote-method="remoteMethod2"
                                                    :loading="loading2"
                                                    placeholder="请输入至少3位报警代码"
                                            >
                                                <i-option v-for="(alarm,index) in searchAlarmList" :value="alarm.value" :key="index">{{alarm.label}}</i-option>
                                            </i-select>
                                        </div>
                                    </Form-item>
                                </row>
                            </i-col>
                        </template>
                    </row>
                      <row v-if="source=='SECOND'">
                          <i-col span="12">
                              <Form-item :label-width="88" label="维修开始时间" prop="repairStartDate" >
                                  <Date-picker v-model="devMaintenRepair.repairStartDate" format="yyyy-MM-dd HH:mm" style="width: 100%" type="datetime" placeholder="开始维修时间"></Date-picker>
                              </Form-item>
                          </i-col>
                          <i-col span="12">
                              <Form-item label-width="88" label="维修结束时间" prop="repairEndDate">
                                  <Date-picker v-model="devMaintenRepair.repairEndDate" style="width: 100%" format="yyyy-MM-dd HH:mm" type="datetime" placeholder="结束维修时间"></Date-picker>
                              </Form-item>
                          </i-col>
                      </row>
                      <row v-if="source != 'SECOND'">
                        <i-col span="12">
                            <Form-item :label-width="88" label="维修开始时间" prop="repairStartDate">
                                <i-input v-model="devMaintenRepair.repairStartDate" placeholder="开始维修时间" disabled></i-input>
                            </Form-item>
                        </i-col>
                        <i-col span="12">
                            <Form-item label-width="88" label="维修结束时间" prop="repairEndDate">
                                <i-input v-model="devMaintenRepair.repairEndDate" placeholder="结束维修时间" disabled></i-input>
                            </Form-item>
                        </i-col>
                      </row>
                      <row>
                          <i-col span="24">
                              <Form-item  label-width="88" label="故障描述" prop="recordDescr">
                                  <div style="position: relative;">
                                      <i-input type="textarea" :rows="4" v-model="devMaintenRepair.recordDescr" placeholder="故障描述"
                                               :maxlength="300" show-word-limit >
                                      </i-input>
                                      <span v-if="devMaintenRepair.recordDescr !== undefined && devMaintenRepair.recordDescr !== ''" style="position: absolute; bottom: -8px; right: 15px;">
                                        {{devMaintenRepair.recordDescr.length }}/300
                                      </span>
                                      <span v-else style="position: absolute; bottom: -8px; right: 15px;">
                                        0/300
                                      </span>
                                  </div>
                              </Form-item>
                          </i-col>
                      </row>
                      <row>
                          <i-col span="24">
                              <Form-item label-width="88" label="原因分析" prop="reason">
                                  <div style="position: relative;">
                                  <i-input type="textarea"  :rows="4" v-model="devMaintenRepair.reason" placeholder="原因"
                                           :maxlength="300" show-word-limit></i-input>
                                      <span v-if="devMaintenRepair.reason !== undefined && devMaintenRepair.reason !== ''" style="position: absolute; bottom: -8px; right: 15px;">
                                        {{ devMaintenRepair.reason.length }}/300
                                      </span>
                                      <span v-else style="position: absolute; bottom: -8px; right: 15px;">
                                        0/300
                                      </span>
                              </div>
                              </Form-item>
                          </i-col>
                      </row>
                      <row>
                          <i-col span="24">
                              <Form-item label-width="88" label="解决办法" prop="solution">
                                  <div style="position: relative;">
                                      <i-input type="textarea"  :rows="4" v-model="devMaintenRepair.solution" placeholder="解决办法"
                                               :maxlength="300" show-word-limit></i-input>
                                  </div>
                                  <span v-if="devMaintenRepair.solution !== undefined && devMaintenRepair.solution !== ''" style="position: absolute; bottom: -8px; right: 15px;">
                                        {{ devMaintenRepair.solution.length }}/300
                                  </span>
                                  <span v-else style="position: absolute; bottom: -8px; right: 15px;">
                                        0/300
                                  </span>
                              </Form-item>
                          </i-col>
                      </row>
                      <row>
                          <i-col span="24">
                              <Form-item label-width="88" label="备注信息" prop="remark">
                                  <i-input type="textarea"  :rows="4" v-model="devMaintenRepair.remark" placeholder="备注信息"></i-input>
                              </Form-item>
                          </i-col>
                      </row>
                </Card>
            </i-col>
            <i-col span="15" class="rightOutMargin">
                <Card>
                    <p slot="title">
                        换件记录
                    </p>
                    <div style="margin-bottom: 5px">
                        <i-button type="info" @click="getSparePart"><i class="fa fa-plus"></i>&nbsp;选择备件</i-button>
                        <i-button type="info" @click="joinTheKey"><i class="fa fa-plus"></i>&nbsp;加入关键备件</i-button>
                        <i-button type="error" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</i-button>
                    </div>
                    <div>
                        <table id="swapRecord"></table>
                    </div>
                </Card>
                <!--维修措施-->
                <Card style="margin-top: 10px;margin-bottom: 10px">
                    <p slot="title">
                        维修措施
                    </p>
                    #if($shiro.hasAnyRole("RL13","RL23"))
                    <div style="margin-bottom: 5px">
                        <i-button type="info" @click="repairMeasureAdd"><i class="fa fa-plus"></i>&nbsp;添加措施</i-button>
                    </div>
                    #end
                    <Row>
                        <div v-for="(repairMeasureItem,measureIndex) in devMaintenRepair.preventMeasureList">
                            <Row align="bottom" style="margin-top: 2px">
                                <i-col span="24" >
                                    <Row justify="center">
                                        <Card style="height: 180px;padding: 15px">
                                            <i-col span="12">
                                               <row>
                                                   <i-col span="12">
                                                       <Form-item label-width="88" label="措施类型">
                                                           <i-select placeholder="请指定措施类型"  v-model="repairMeasureItem.measureType" @on-change="handleTypeChange(measureIndex)">
                                                               <i-option v-for="measureItem in measureType" :value="measureItem.value"
                                                                         :key="measureItem.value" >
                                                                   {{measureItem.name}}
                                                               </i-option>
                                                           </i-select>
                                                       </Form-item>
                                                   </i-col>
                                                   <i-col  span="12">
                                                       <Form-item label-width="88" label="处理人员" prop="reason"  >
                                                           <i-select placeholder="请指定处理人员"  v-model="repairMeasureItem.dutyUserId" >
                                                               <i-option v-for="measureItem in dutyUserIdListNull" :value="measureItem.value"
                                                                         :key="measureItem.value" v-if="repairMeasureItem.isShow != 'ERMS_TODO_LIST'" >
                                                                   {{measureItem.label}}
                                                               </i-option>
                                                               <i-option v-for="measureItem in dutyUserIdList" :value="measureItem.value"
                                                                         :key="measureItem.value" v-if="repairMeasureItem.isShow == 'ERMS_TODO_LIST'||repairMeasureItem.isShow ==null">
                                                                   {{measureItem.label}}
                                                               </i-option>
                                                           </i-select>
                                                       </Form-item>
                                                   </i-col>

                                               </row>
                                            </i-col>
                                            <i-col span="12">
                                                <row>
                                                    <i-col span="12" >
                                                        <Form-item label-width="88" label="开始时间" >
                                                            <Date-picker v-model="repairMeasureItem.startDate" style="width: 100%" format="yyyy-MM-dd" type="date" placeholder="请选择开始时间"></Date-picker>
                                                        </Form-item>
                                                    </i-col>
                                                    <i-col span="12">
                                                        <Form-item label-width="88" label="结束时间" >
                                                            <Date-picker v-model="repairMeasureItem.endDate" format="yyyy-MM-dd" style="width: 100%" type="date" placeholder="请选择结束时间"></Date-picker>
                                                        </Form-item>
                                                    </i-col>
                                                </row>
                                            </i-col>
                                            <i-col span="24">
                                                <Form-item  :label="'措施'+(measureIndex+1)" prop="reason">
                                                    <i-input type="textarea" v-model="repairMeasureItem.content" placeholder="原因"></i-input>
                                                </Form-item>
                                            </i-col>
                                        </Card>
                                    </Row>
                                </i-col>
                                #if($shiro.hasPermission("devFaultPreventMeasure:delete"))
                                <div class="repairMeasureStyle">
                                    <div class="measureClose" >
                                        <i class="fa fa-trash-o" @click="delRepairMeasureDetail(measureIndex)"></i>
                                    </div>
                                </div>
                                #end
                            </Row>
                        </div>
                    </Row>

                </Card>
                <!--附件列表-->
                <Card>
                    <p slot="title">
                        附件列表
                    </p>
                    <!-- 目前只允许车间机电设备工程师和制造处机电设备工程师进行编辑操作 -->
                    #if($shiro.hasAnyRole("RL13","RL23"))
                    <div style="margin-bottom: 5px">
                        <i-button type="info" @click="annexModalShow"><i class="fa fa-plus"></i>&nbsp;上传附件</i-button>
                        <i-button type="error" @click="delAnnexList"><i class="fa fa-trash-o"></i>&nbsp;删除</i-button>
                    </div>
                    #end
                    <div>
                        <table id="annexList"></table>
                    </div>
                </Card>
            </i-col>
        </Row>
        <!--上传附近列表-->
        <Modal
                v-model="annexListShow"
                title="请上传附件"
                @on-ok="annexSubmit"
                @on-cancel="annexCancel">
           <div style="display: flex">
               <div style="flex-basis: 12%;display: flex;align-items: center">
                   附件名称
               </div>
               <div style="flex-basis: 88%">
                   <i-input v-model="annexFile.fileName" placeholder="附件标题" readonly></i-input>
               </div>
           </div>
            <div style="display: flex;margin-top: 15px;">
                <div style="flex-basis: 12%;display: flex;align-items: center">
                    文件路径
                </div>
                <div style="flex-basis: 88%;display: flex">
                    <div style="flex-basis: 80%;">
                      <div style="width: 100%">
                          <i-input v-model="annexFile.url" placeholder="上传附件后自动填写，建议优先上传PDF文件" readonly ></i-input>
                      </div>
                    </div>
                    <div style="flex-basis: 20%">
                        <Upload
                                ref="uploadFile"
                                action="../sys/oss/device/file"
                                :before-upload="handleBeforeUpload"
                                :on-success="handleSuccess"
                                :show-upload-list="false"
                                :on-exceeded-size="handleMaxSize">
                            <i-button icon="ios-cloud-upload-outline">上传</i-button>
                        </Upload>
                    </div>
                </div>
            </div>
        </Modal>
        </Card>
    </i-form>
    <!--关键零部件modal-->
    <Modal
            v-model="keyModal"
            title="请输入/选择位置号"
            @on-ok="keyOk"
            @on-cancel="keyCancel"
    >
        <div v-if="isList">
            <div style="display: flex" v-if="isSelect">
                <i-select v-model="keyQuarms.position">
                    <i-option v-for="alarm in keyPartList" :value="alarm.position" :key="alarm.position">{{alarm.position}}</i-option>
                </i-select>
                <div  style="margin-left: 2px">
                    <i-button type="info" @click="clearKey" icon="md-arrow-round-forward">手动录入 </i-button>
                </div>
            </div>
            <div style="display: flex" v-else>
                <i-input  placeholder="请输入位置号" v-model="keyQuarms.position" ></i-input>
                <div style="margin-left: 2px">
                    <i-button type="info" @click="clearKey" icon="md-arrow-round-forward">选择输入</i-button>
                </div>
            </div>
        </div>
        <div v-else>
            <i-input  placeholder="请输入位置号" v-model="keyQuarms.position" ></i-input>
        </div>
    </Modal>
</div>
<script src="${rc.contextPath}/js/device/perfectRepairRecord.js?_${date.systemTime}"></script>
</body>
</html>
